<template>
  <div>
    <div class="name_aside RightCardTitle">重点城集镇与基础设施淹没分析</div>
    <div id="ymfxChart" style="width:100%; height: 20rem;" />
    <div class="name_aside RightCardTitle">重点集镇村落淹没分析详情</div>
    <div class="tableBox">
      <div class="titleList">
        <span>名称</span>
        <span>乡镇</span>
        <span>人口数</span>
        <span>名称</span>
        <span>淹没深度<br>(m)</span>
        <span>淹没时间</span>
      </div>
      <el-collapse accordion>
        <el-collapse-item v-for="item in 6" :key="item">
          <template slot="title"> 一致性 Consistency </template>
          <div @click="onClickShowDetail">
            与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
          </div>
          <div>
            在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="name_aside RightCardTitle">重点基础设施淹没分析详情</div>
    <div class="tableBox">
      <div class="titleList">
        <span>名称</span>
        <span>乡镇</span>
        <span>人口数</span>
        <span>名称</span>
        <span>淹没深度<br>(m)</span>
        <span>淹没时间</span>
      </div>
      <el-collapse accordion>
        <el-collapse-item v-for="item in 6" :key="item">
          <template slot="title"> 一致性 Consistency </template>
          <div>
            与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
          </div>
          <div>
            在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <Dlgdiv v-if="this.$store.getters.dlgShow" mask style="width: 80%;height: 60%;position: fixed;left: 10%;top: 20%;">
      <template v-slot:title>
        淹没分析详情
      </template>
      <template v-slot:body>
        <InundationAnalysisInfo />
      </template>
    </Dlgdiv>
  </div>
</template>

<script>
import InundationAnalysisInfo from '../ShortPro/InundationAnalysisInfo.vue'
export default {
    components: {
        InundationAnalysisInfo
    },
    data() {
        return {
        }
    },
    methods: {
        onClickShowDetail() {
            this.$store.dispatch('dlgShow', true)
        }
    }
}
</script>

<style lang="less" scoped>
	.tableBox {
		font-size: 12px;
		line-height: 17px;
	}
</style>
